<template>
  <view class="btn-content">
    <view  @click="hanldeClick" class="btn" :style="[{backgroundColor: backgroundColor, borderRadius:  borderRadius + 'rpx', color: color}, {width: lineWidth + 'rpx'}, {height: lineHeight + 'rpx'}, {fontSize: fontSize + 'rpx'}, {border: border}]">{{content}}</view>
  </view>
</template>

<script>
  export default {
    name:"t-button",
    props: {
      lineWidth: {
        type: String,
        default: '631'
      },
      lineHeight: {
        type: String,
        default: '78'
      },
      content: {
        type: String,
        default: '添加新地址'
      },
      backgroundColor: {
         type: String,
         default: '#FA312A'
      },
      color: {
        type: String,
        default: '#FFFFFF'
      },
      borderRadius: {
        type: String,
        default: '10'
      },
      fontSize: {
        type: String,
        default: '32'
      },
      border: {
        type: String,
        default: '1px solid #E1E1E1'
      },
      disabled: {
            type: Boolean,
            default: false,
          },
    },
    data() {
      return {
        
      };
    },
    methods: {
      hanldeClick() {
        if (!this.disabled) {
                this.$emit('handleBtnClick');
              }
      }
    }
  }
</script>

<style lang="scss">
.btn-content {
  width: 100%;
  height: 121rpx;
  // overflow: hidden;
  background: #FFFFFF;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn {
    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin: 22rpx 60rpx  21rpx 59rpx;
    overflow: hidden;
  }
}
</style>